<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<style type="text/css">
			.mui-scroll{
				padding: 1vh 2vw;
			}
			.mui-table-view:before{
				height: 0;
			}
			.mui-table-view:after{
				height: 0;
			}
			#address{
				background-color: rgba(255,255,255,0);
			}
			.myAddress{
				width: 90%;
				height: auto;
				border: 2px solid rgb(190,230,220);
				margin: 5% 5%;
				border-radius: 10px 10px;
				padding: 1% 1%;
			}
			.ui-alert{
				text-align: center;
				font-size: 12px;
				line-height: 40px;
				width: auto;
			}
			.ui-btn{
				height: 100%;
				border-radius: 0 0;
				width: 100%;
			}
			#addressForm{
				width:90%;
				height:50vh;
				margin: 10% 5%;
				border: 2px rgb(222,230,222) solid;
				border-radius: 10px 10px;
				background-color: rgb(255,255,250);
				opacity: 0;
				display: none;
			}
			.mui-input-group .mui-input-row:after{
				width: 100%;
				left: 0;
			}
			#default{
				display: block;
				background-color: deeppink;
				border: none;
				border-radius: 5px 5px;
				color: rgb(0,230,108);
			}
			#none{
				display: none;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-icon mui-icon-back mui-pullleft" onclick="back()"></span>
			<h5 class="mui-title">收货地址管理</h5>
		</header>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view" id="address">
				</ul>
				<button type="button" class="mui-btn mui-btn-danger" id="addAddress"><span class="mui-icon mui-icon-plusempty"></span>添加修改地址</button>
				<div id="addressForm">
					<p class="mui-right mui-cen">请仔细填写收货地址</p>
					<form class="mui-input-group" action="" method="post">
						<div class="mui-input-row">
							<label>收货人:</label>
							<input type="text" id="realname" value="" class="mui-input-clear" placeholder="请输入收货人" name="realname" required="required" />
						</div>
						<div class="mui-input-row" style="height: auto;">
							<button  id="showPicker" type="button" class=" mui-btn-success ui-btn">选择地址</button>
							<div class="ui-alert"  id="resultAddress"></div>
							<input type="hidden" name="province" id="province" value="" />
							<input type="hidden" name="city" id="city" value="" />
							<input type="hidden" name="area" id="area" value="" />
						</div>
						<div class="mui-input-row">
							<label>联系电话:</label>
							<input type="tel" id="mobile" class="mui-input-clear" value="" required="required" /></div>
						<div class="mui-input-row">
							<label>详细地址:</label>
							<input type="text" id="deladdress" name="addresss" required="required" value="" />
						</div>
						<input type="hidden" id="addrid" value="" />
						<div class="mui-button-row">
							<button class="mui-btn mui-btn-success" id="update" type="button">保存</button>
							<button class="mui-btn mui-btn-danger" id="awayBtn" type="button">取消</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		
		
		
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				//获取当前窗口对象  以及其父窗口对象
				var ws = plus.webview.currentWebview();
				var wo = ws.opener();
				//显示当前窗口页面 ws  关闭窗口等待框
				ws.show('pop-in');
				wo.evalJS('closeWaiting()');
				
				//判断是否有本地缓存
				var addr_data = plus.storage.getItem('addr_data');
				if(addr_data){
					
				}else{
					getData('inner','20161011116366904671');
						
				}
				
				
			});
			//调用区域选择器组件
			var cityPicker = new mui.PopPicker({
				buttons:['取消','确定'],
				layer:3
			});
			cityPicker.setData(cityData3);
			var showCityPicker = document.getElementById('showPicker');
			var resultAddress = document.getElementById('resultAddress');
			showCityPicker.addEventListener('tap',function(e){
				cityPicker.show(function(items){
					resultAddress.innerText = "您的地址："+(items[0]||{}).text+" "+(items[1]||{}).text+" "+(items[2]||{}).text;
					document.getElementById('province').value = (items[0]||{}).text;
					document.getElementById('city').value = (items[1]||{}).text;
					document.getElementById('area').value = (items[2]||{}).text;
				});
			},false);
			
			
			/**
			 * 添加地址
			 */
			var updateBtn = document.getElementsByClassName('updateBtn');
			var addBtn = document.getElementById('addAddress');
			var addSwipe = 1;
			var addressForm = document.getElementById('addressForm');
			var timeout;
			addBtn.addEventListener('tap',function(){
				clearTimeout(timeout);
				timeout	= setTimeout(
					function(){
						if(addSwipe){
							mui.each(updateBtn,function(index,item){
								item.setAttribute('disabled','disabled')
							});
							addressForm.style.display = 'block';
							var oldOpacityOut = 0;
							var timer1 = null;
							timer1 = setInterval(function(){
								if(oldOpacityOut < 100){
									oldOpacityOut += 10;;
									addressForm.style.opacity =  oldOpacityOut/100;
									
								}else{
									clearInterval(timer1);
									mui('.mui-scroll-wrapper').scroll().scrollToBottom(500);
								}
							},100);
							
							addSwipe = 0;
						}else{
							var oldOpacityIn = 100;
							var timer2 = null;
							timer2 = setInterval(function(){
								if(oldOpacityIn <= 0){
									addressForm.style.display = 'none';
									mui.each(updateBtn,function(index,item){
										item.removeAttribute('disabled');
									});
									clearInterval(timer2);
									mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);
								}else{
									oldOpacityIn -= 10;
									addressForm.style.opacity = oldOpacityIn/100;
									
								}
							},100);
							
							addSwipe = 1;
						}
					},500);
			});
			
			/**
			 * 地址填单取消选项
			 */
			var awayBtn = document.getElementById('awayBtn');
			var timeout2;
			awayBtn.addEventListener('tap',function(){
				clearTimeout(timeout2);
				timeout2 = setTimeout(function(){
					document.getElementById('update') || document.getElementById('realUpdate').setAttribute('id','update');
					var oldOpacityIn = 100;
					var timer3 = null;
					timer3 = setInterval(function(){
						if(oldOpacityIn <= 0){
							addressForm.style.display = 'none';
							addBtn.removeAttribute('disabled') || mui.each(updateBtn,function(index,item){
								item.removeAttribute('disabled');
							});
							clearInterval(timer3);
							mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);
						}else{
							oldOpacityIn -= 10;
							addressForm.style.opacity = oldOpacityIn/100;
						}
					},100);
					addSwipe = 1;
				},500);
			})
			
			/**
			 * 设置默认收货地址
			 */
			var defaultIcon = document.getElementsByClassName('defaultIcon');
			mui('#address').on('tap','.defaultBtn',function(){
//				alert(this.lastChild.value);
				var addrId = this.lastChild.value;
				var ip = ipconfig().ip;
				mui.each(defaultIcon,function(index,item){
					item.setAttribute('id','none');
				})
				this.parentNode.parentNode.firstChild.setAttribute('id','default');
				//修改数据库default字段值
				mui.ajax(ip+'Ucenter.updateDefault',{
					data:{addr_id:addrId},
					dataType:'json',
					type:'get',
					success:function(data){
						if(data.data.code==0){
							alert(data.data.info);
						}else{
							alert(data.data.msg);
						}
					},
					error:function(xhr,type,errorThrow){
						console.log(type);
					}
				})
			});
			
			/**
			 * 修改收货地址信息
			 */
			
			mui('#address').on('tap','.updateBtn',function(){
				var addrid = this.previousSibling.lastChild.value;
				var thiselement = this.parentNode.parentNode;
				clearTimeout(timeout);
				timeout	= setTimeout(
					function(){
						if(addSwipe){
							addBtn.setAttribute('disabled','disabled');
							mui.each(updateBtn,function(index,item){
									item.setAttribute('disabled','disabled');
							});
							addressForm.style.display = 'block';
							var oldOpacityOut = 0;
							var timer1 = null;
							//获取收货信息
							var oldData = thiselement.querySelector('.hidedata').value;
							oldData = oldData.split(',');
							realname.value = oldData[4];
							province.value = oldData[0];
							city.value = oldData[1];
							area.value = oldData[2];
							mobile.value = oldData[5];
							address.value = oldData[3];
							resultAddress.innerText =  "您的地址:"+oldData[0]+" "+oldData[1]+" "+oldData[2];
							document.getElementById('addrid').value = addrid;
							
							
							
							
							timer1 = setInterval(function(){
								if(oldOpacityOut < 100){
									oldOpacityOut += 10;;
									addressForm.style.opacity =  oldOpacityOut/100;
								}else{
									clearInterval(timer1);
								}
							},100);
							mui('.mui-scroll-wrapper').scroll().scrollToBottom(500);
							addSwipe = 0;
						}
					},500);
			});
			
			/**
			 * 删除收货地址信息
			 */
			var delBtn = document.getElementsByClassName('deleteBtn');
			mui('#address').on('tap','.deleteBtn',function(){
				var addrid = this.previousSibling.previousSibling.lastChild.value;
				var thiselement = this.parentNode.parentNode;
				
				mui.confirm('确认要删除此收货地址么','删除否？？？',['确认','取消'],function(e){
					if(e.index){
						return;
					}else{
						mui.ajax(ipconfig().ip+'Ucenter.delAddrData',{
							data:{addr_id:addrid},
							dataType:'json',
							type:'get',
							headers:{'Content-Type':'application/json'},
							success:function(data){
								if(data.data.code==0){
									mui.toast('阿哦~~删除成功(╯‵□′)╯︵┻━┻');
									document.getElementById('address').removeChild(thiselement);
								}
							},
							error:function(xhr,type,errorThrow){
								console.log(type);
							}
						});
					}
				});
				
				
				
			});
			
			
			
			
			
			/**
			 * 获取用户收货地址信息
			 * 
			 */
			var getData = function(type,token){
				var openid = token;
				var ip = ipconfig().ip;
				var type = type;
				mui.ajax(ip+'Ucenter.getAddrData',{
					data:{openid:openid},
					dataType:'json',
					type:'get',
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.data.code == 0){
							load(data.data.data,type);
						}else{
							alert(data.data.msg);
						}
					},
					error:function(xhr,type,errorThrow){
						console.log(type);
					}
				});
			}
			
			/**
			 * dom载入函数
			 */
			var load = function(data,type){
				var html = [];
				var display = [];
				mui.each(data,function(index,item){
					if(item.isdefault==1){
						display.push('default');
					}else{
						display.push('none');
					}
					html.push('<li class="myAddress"><p id="'+display[index]+'" class="mui-left defaultIcon"><span class="mui-icon mui-icon-checkmarkempty"></span>默认地址</p><p class="mui-left">'+item.province+' '+item.city+' '+item.area+'</p><p class="mui-left">'+item.address+'</p><p class="mui-left">'+item.realname+' tel：'+item.mobile+'</p><div class="mui-button-row"><button class="mui-btn mui-btn-success defaultBtn" type="button">设为默认<input type="hidden" class="addrId" value="'+item.id+'" /></button><button class="mui-btn mui-btn-yellow updateBtn" type="button"><span class="mui-icon mui-icon-compose"></span>修改</button><button class="mui-btn mui-btn-danger deleteBtn"><span class="mui-icon mui-icon-trash"></span>删除</button></div><input type="hidden" value="'+item.province+','+item.city+','+item.area+','+item.address+','+item.realname+','+item.mobile+'" class="hidedata"></input></li>');
				});
				
				if(type = 'inner'){
					document.getElementById('address').innerHTML = html.join("");
				}
				
				
				mui('.mui-scroll-wrapper').scroll({
					deceleration:0.0005
				});
			}
			
			
			
			/**
			 * 地址表单提交
			 * 
			 */
			var realname = document.getElementById('realname');
			var province = document.getElementById('province');
			var city = document.getElementById('city');
			var area = document.getElementById('area');
			var mobile = document.getElementById('mobile');
			var address = document.getElementById('deladdress');
			var update = document.getElementById('update');
			update.addEventListener('tap',function(){
				if(realname.value.length==0||province.value.length==0||mobile.value.length==0||address.value.length==0){
					alert('请将收货人信息完整填写');
				}else{
					//发送ajax
					
					if(document.getElementById('addrid').value){
						updateAddr('addAddr&update='+document.getElementById('addrid').value);
						return;
					}
					
					
					updateAddr('addAddr','20161011116366904671');
				}
				
			},false);
			
			
			/**
			 * ajax提交
			 * @param {string} act 		提交类别
			 * @param {String} token	用户登录id
			 * @param {Array||Int}  data     提交数据
			 */
			var addrli = document.getElementsByClassName('myAddress');
			var updateAddr = function (act,token){
				
//				console.log(realname);
				var adata = token==null ? {
					realname:realname.value,province:province.value,city:city.value,area:area.value,mobile:mobile.value,address:address.value,token:token
				} : {
					realname:realname.value,province:province.value,city:city.value,area:area.value,mobile:mobile.value,address:address.value,token:token
				};
//				console.log(JSON.stringify(adata));
				var ip = ipconfig().ip;
				mui.ajax(ip+"Ucenter."+act,{
					data:adata,
					dataType:'json',
					timeout:'10000',
					type:'post',
					headers:{'Content-Type':"application/x-www-form-urlencoded"},
					success:function(data){
						if(data.data.code==0){
							if(token){
								var li = document.createElement('li');
								li.setAttribute('class','myAddress');
								li.innerHTML = '<p id="none" class="mui-left defaultIcon"><span class="mui-icon mui-icon-checkmarkempty"></span>默认地址</p><p class="mui-left">'+adata.province+' '+adata.city+' '+adata.area+'</p><p class="mui-left">'+adata.address+'</p><p class="mui-left">'+adata.realname+' tel：'+adata.mobile+'</p><div class="mui-button-row"><button class="mui-btn mui-btn-success defaultBtn" type="button">设为默认<input type="hidden" class="addrId" value="'+data.data.info+'" /></button><button class="mui-btn mui-btn-yellow updateBtn" type="button"><span class="mui-icon mui-icon-compose"></span>修改</button><button class="mui-btn mui-btn-danger deleteBtn"><span class="mui-icon mui-icon-trash"></span>删除</button></div><input type="hidden" value="'+adata.province+','+adata.city+','+adata.area+','+adata.address+','+adata.realname+','+adata.mobile+'" class="hidedata"></input>';
								document.getElementById('address').appendChild(li);
							}else{
								mui.each(addrli,function(index,item){
									if(item.querySelector('.addrId').value == document.getElementById('addrid').value){
										item.childNodes[1].innerText = adata.province+' '+adata.city+' '+adata.area;
										item.childNodes[2].innerText = adata.address;
										item.childNodes[3].innerText = adata.realname+' tel: '+adata.mobile;
										item.querySelector('.hidedata').value = adata.province+','+adata.city+','+adata.area+','+adata.address+','+adata.realname+','+adata.mobile;
									}
								});
							}
							
							clearTimeout(timeout2);
							timeout2 = setTimeout(function(){
								var oldOpacityIn = 100;
								var timer3 = null;
								timer3 = setInterval(function(){
									if(oldOpacityIn <= 0){
										addressForm.style.display = 'none';
										addBtn.removeAttribute('disabled') || mui.each(updateBtn,function(index,item){
											item.removeAttribute('disabled');
										})
										clearInterval(timer3);
										mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);
									}else{
										oldOpacityIn -= 10;
										addressForm.style.opacity = oldOpacityIn/100;
									}
								},100);
								addSwipe = 1;
							},500);
							mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,300);
							
						}
					},
					error:function(xhr,type,errorThrow){
						console.log(errorThrow);
					}
				});
				 
			}
			
			
			
		</script>
	</body>
</html>
